{include file='admin/header.html'}

<form class="layui-form i18n" style="overflow: hidden;" action="">
    <div class="layui-row">
        <div class="layui-col-md2">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <h3 class="layui-form-mid" style="width: 160px;">
                        <svg style="vertical-align:bottom" width="24" height="24" viewBox="0 0 768 768">
                            <path
                                d="M672 640.5v-417c0-18-13.5-31.5-31.5-31.5h-282l37.5 129h61.5v-33h34.5v33h115.5v33h-40.5c-10.5 40.5-33 79.5-61.5 112.5l87 85.5-22.5 24-87-85.5-28.5 28.5 25.5 88.5-64.5 64.5h225c18 0 31.5-13.5 31.5-31.5zM447 388.5c7.5 15 19.5 34.5 36 54 39-46.5 49.5-88.5 49.5-88.5h-127.5l10.5 34.5h31.5zM423 412.5l19.5 70.5 18-16.5c-15-16.5-27-34.5-37.5-54zM355.5 339c0-7.381-0.211-16.921-3-22.5h-126v49.5h70.5c-4.5 19.5-24 48-67.5 48-42 0-76.5-36-76.5-78s34.5-78 76.5-78c24 0 39 10.5 48 19.5l3 1.5 39-37.5-3-1.5c-24-22.5-54-34.5-87-34.5-72 0-130.5 58.5-130.5 130.5s58.5 130.5 130.5 130.5c73.5 0 126-52.5 126-127.5zM640.5 160.5c34.5 0 63 28.5 63 63v417c0 34.5-28.5 63-63 63h-256.5l-31.5-96h-225c-34.5 0-63-28.5-63-63v-417c0-34.5 28.5-63 63-63h192l28.5 96h292.5z" />
                        </svg> {$tran.google_translate}
                    </h3>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-form-item" style="float: right;">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="sl" lay-filter="i18nsltl" lay-verify="required">
                            <option value="auto" data-voice="">{$tran.detect_language}</option>
                            {foreach from="$langs" item="_lang"}
                            <option value="{$_lang.slug}" data-voice="{$_lang.voice}" {if $_lang.slug=='zh-CN'} selected="selected"{/if}>{$_lang.name}（{$_lang.title}）</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">⇄</div>
                    <div class="layui-input-inline">
                        <select name="tl" lay-filter="i18nsltl" lay-verify="required">
                            {foreach from="$langs" item="_lang"}
                            <option value="{$_lang.slug}" data-voice="{$_lang.voice}" {if $_lang.slug=='en'} selected="selected"{/if}>{$_lang.name}（{$_lang.title}）</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" lay-active="googleTranslate">{$tran.translate}</button>
                    <button type="reset" class="layui-btn layui-btn-primary">{$tran.reset}</button>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-normal" lay-active="fetch">{$tran.fetch}</button>
                    <button type="button" class="layui-btn layui-btn-danger" lay-filter="generate"
                        lay-submit="">{$tran.generate}</button>
                    <button type="button" class="layui-btn" lay-active="pos_empty_line">{$tran.position}</button>
                    <button type="button" class="layui-btn" lay-active="select_fill">{$tran.fill}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12" style="display: flex;">
            <div class="layui-input-inline" style="flex: 1;">
                <input type="text" id="i18n-source" autocomplete="off" placeholder="" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-primary" lay-active="select_tran"
                    style="margin: 0 10px;">⇄</button>
            </div>
            <div class="layui-input-inline" style="flex: 1;">
                <input type="text" id="i18n-target" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6" style="display: flex;">
                <div class="layui-form-item" style="width: 70px;margin-right: 1px;">
                    <textarea disabled="disabled"
                        style="resize: none;overflow: hidden;text-align: right;background-color: #eaeaea;" rows="15"
                        class="layui-textarea">1</textarea>
                </div>
                <div class="layui-form-item" style="flex: 1;">
                    <textarea name="q" style="white-space: pre;" placeholder="Text to translate." rows="15" required
                        lay-verify="required" class="layui-textarea"></textarea>
                    <div class="layui-form-mid layui-word-aux">{$tran.lines} 1</div>
                    <div class="layui-form-mid speak-voice speak-sl-voice" style="float: right;">
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-btn-xs layui-btn-radius layui-icon layui-icon-speaker"></button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6" style="display: flex;">
                <div class="layui-form-item" style="width: 70px;margin-right: 1px;">
                    <textarea disabled="disabled"
                        style="resize: none;overflow: hidden;text-align: right;background-color: #eaeaea;" rows="15"
                        class="layui-textarea">1</textarea>
                </div>
                <div class="layui-form-item" style="flex: 1;">
                    <textarea name="to" style="white-space: pre;" placeholder="" rows="15" required
                        lay-verify="required" class="layui-textarea"></textarea>
                    <div class="layui-form-mid layui-word-aux">{$tran.lines} 1</div>
                    <div class="layui-form-mid speak-voice speak-tl-voice" style="float: right;">
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-btn-xs layui-btn-radius layui-icon layui-icon-speaker"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

{include file='admin/inc/form.html'}

{include file='admin/footer.html'}